// pages/indexmd/indexmd.js
import * as echarts from '../../ec-canvas/echarts';
var axios = require("../util/request.js")
var app = getApp()

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    ec: {
      
    },
    ec1: {
     
    },
    ec2: {
      
    },
    ec3: {
      
    },
    indicatorDots:true,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    type:'',
    day0: '',
    day1: '',
    day2: '',
    day01: '',
    day11: '',
    day21: '',
    day02: '',
    day12: '',
    day22: '',
    tabBar: '',
    id: '200',
    total_amount: '',
    total_custom: '',
    total_ticket: '',
    currentTab:'today'

  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  
  onLoad: function (id) {
    app.editTabBar()
    this.setData({
      tabBar: app,
      id: id.id
    })
    // 楼层占比
    this.echartsComponnet = this.selectComponent('#mychart');
    this.init_echarts()
    // 潜力榜
    this.echartsComponnet1 = this.selectComponent('#mychart1');
    this.init_echarts1()
    // 业态占比
    this.echartsComponnet2 = this.selectComponent('#mychart2');
    this.init_echarts2()
    // 楼层占比
    this.echartsComponnet3 = this.selectComponent('#mychart3');
    this.init_echarts3()

    this.dateinterface('amount' )
    this.dateinterface("ticket")
    this.dateinterface('custom')
    // 查询金额
    this.datalist()
    // 获取光荣榜
    this.clickTab()
    
  },
  // 楼层占比
  init_echarts: function (a,b,c) {   
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption(a, b,c));
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  init_echarts1: function (a, b,c) {
    this.echartsComponnet1.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption(a, b,c));
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  init_echarts2: function (a, c,d) {
    this.echartsComponnet2.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
     
      


      Chart.setOption(this.getOption1(a,  c,d));
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  init_echarts3: function (a, c,d) {
    
    this.echartsComponnet3.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption1(a, c,d));
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  getOption: function (xdaya,ydaya,name) {   
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: name,
        left: 'center',
      },
      grid: {
        left: '1%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      color: ['#36c9c6', '#ffb486', '#5ab2ea', '#d67380'],
      xAxis: {
        type: 'category',
        data: xdaya,
        axisTick: {
          alignWithLabel: false
        },
        axisLabel: {
          interval: 0,
          rotate: 40, //代表逆时针旋转45度
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [{        
        type: 'bar',
        barWidth: 20,       
        label: {
          normal: {
            show: true,
            position: 'top',        　 
            fontSize:10,          　  
          }
        },
        data: ydaya,
        
      }]
    }
    return option;
  },
  getOption1: function (xdata,  name,c) {
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: name,

        x: 'center'
      },
      
      color: name == '业态占比' ? ['#36c9c6', '#ffb486', '#5ab2ea', '#d67380'] : ['#97b45e', '#936e6d', '#e5cc44', '#8b97af', '#d67380', '#ffb486', '#36c9c6', '#da61a6'],
      legend: {
        
        orient: 'vertical',
        left: 'left',
        top:60,
        formatter: function (name) {
          let target;
          let baifen;
          let sum = 1;
          for (var i = 0; i < xdata.length; i++) {
            sum += xdata[i].value;
            if (xdata[i].name === name) {
              target = `${xdata[i].value}`
              baifen = `${xdata[i].value}`
            }
          }

          let arr = ["{b|" + name + "}", "{a|" + target + "}", "{c|" + (baifen / sum * 100).toFixed(2) + "}%"]
          return arr.join(",").replace(/,/g, '')
        },
        textStyle: {
          rich: {
            a: {
              fontSize: 12,
              color: "#333",
              width: 60,
            },
            b: {
              fontSize: 12,
              color: "#333",
              width: 60
            },
            c: {
              fontSize: 12,
              color: "#333",

            }
          }
        }
      },
     
      series: [{
        name: '业态占比分布',
        type: 'pie',
        // radius: ['35%', '50%'],
        radius: c,
        center: ['75%', '55%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: xdata
      }]
    }
    return option;
  },

  dateinterface(data1) {
    var that=this;
    wx.request({
      url: `${axios.host}yunpiaobox/last_three_day_feature`,
      data: {
        "feature":data1
      },
      header: {
        "AUTHORIZATION": `${app.globalData.token}`
      },
      method: 'post',    
      success: function (date) {
       
        if (date.data.code == "E000000") {
          if (data1 == 'amount') {      
            that.setData({
               day0:date.data.data.day0,
                day1:date.data.data.day1,
                day2:date.data.data.day2,
            })           
          } else if (data1 == 'custom') {
            that.setData({
              day01: date.data.data.day0,
              day11: date.data.data.day1,
              day21: date.data.data.day2,
            })          
          } else {
            that.setData({
              day02: date.data.data.day0,
              day12: date.data.data.day1,
              day22: date.data.data.day2,
            })
          }
        }
        
      },
      fail: function(res) {},
     
    })
    
  },
  datalist(){
    axios.getData('yunpiaobox/mall_total_num', this.shuffleSuc);
  },
  shuffleSuc(res){
    this.setData({
      total_amount: res.data.data.total_amount,
      total_custom: res.data.data.total_custom,
      total_ticket: res.data.data.total_ticket
    })
  },
  // tab切换
  clickTab(e){
    var duration=''
    if(e ==='' || e=== null || e===undefined){
      duration = this.data.currentTab
    }else{
      console.log('3')
      duration = e.currentTarget.dataset.current
      this.setData({
        currentTab: e.currentTarget.dataset.current
      })
    }
    //  console.log(e.currentTarget.dataset.current)
    // 光荣
    axios.post('yunpiaobox/honour_list', { "duration": duration, "feature": "amount" }, this.shuffleSuc1);
    // 潜力
    axios.post('yunpiaobox/potential_list', { "duration": duration, "feature": "amount" }, this.shuffleSuc2);
    // 业态
    axios.post('yunpiaobox/retail_form_order', { "duration": duration, "feature": "amount" }, this.shuffleSuc3);
    // 楼层占比
    axios.post('yunpiaobox/floor_order', { "duration": duration, "feature":"amount"}, this.shuffleSuc4);
   
  },
  shuffleSuc1(res){
         
      this.init_echarts(res.data.data.x_list, res.data.data.y_list,'光荣榜')
  },
  shuffleSuc2(res) {
    
    this.init_echarts1(res.data.data.x_list, res.data.data.y_list,'潜力榜')
  },
  shuffleSuc3(res1) {
    var that=this;
    wx.getSystemInfo({
      success: function (res) { 
        if (res.platform == "devtools") {
          that.init_echarts2(res1.data.data, '业态占比', ['35%', '50%'])
        } else if (res.platform == "ios") {
          that.init_echarts2(res1.data.data, '业态占比', ['35%', '50%'])
        } else if (res.platform == "android") {
          that.init_echarts2(res1.data.data, '业态占比', ['0', '50%'])
        }
      }
    })
    
  },
  shuffleSuc4(res1) {
    // console.log(res.data.data)
    // this.init_echarts3(res.data.data, '楼层占比')
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        if (res.platform == "devtools") {
          that.init_echarts3(res1.data.data, '楼层占比', ['35%', '50%'])
        } else if (res.platform == "ios") {
          that.init_echarts3(res1.data.data, '楼层占比', ['35%', '50%'])
        } else if (res.platform == "android") {
          that.init_echarts3(res1.data.data, '楼层占比', ['0', '50%'])
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})